<!--
 * @Author: Soulmate
 * @Date: 2023-09-18 08:37:27
 * @LastEditTime: 2023-09-19 11:42:43
 * @LastEditors: Soulmate
 * @Description: 
 * @FilePath: \ruoyi-ui-vue3\src\components\EasyLineChart\index.vue
 * 版权声明
-->
<script lang="ts" setup>
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

const props = defineProps({
    chartData: {
        type: Object,
        default: {},
    },
    height: {
        type: Number,
        default: 250,
    },
});

const chart = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value
onMounted(() => {});

function initChart() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(chart.value);
    // 指定图表的配置项和数据
    var option = {
        title: props.chartData.title ?? '',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        legend: props.chartData.legend ?? {},
        grid: {
            ...props.chartData?.grid,
        },
        toolbox: {
            ...props.chartData?.toolbox,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            ...props.chartData?.xAxis
        },
        yAxis: {
            type: 'value',
            ...props.chartData?.yAxis
        },
        series: props.chartData?.seriesData,
    } as EChartsOption;
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    //随着屏幕大小调节图表
    window.addEventListener('resize', () => {
        myChart.resize();
    });
}

watch(
    () => props.chartData,
    () => {
        initChart();
    },
);
</script>

<template>
    <div ref="chart" :style="`width: 100%; height: ${props.height}px`"></div>
</template>

<style scoped></style>
